<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      #box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>

    <script>
      window.onload = function () {
        /*
          点击按钮以后,修改box1的大小
        */
        //获取box1
        var box1 = document.getElementById('box1');
        //为按钮绑定单击响应函数
        var btn01 = document.getElementById('btn01');
        btn01.onclick = function () {
          //修改box1的宽度
          /*
            通过JS修改元素
              语法: 元素.style.样式名 = 样式值

            注意: 如果CSS的样式名中含有减号(-)
                    这种名称在JS中是不合法的,比如background-color
                    需要将这种样式名修改为驼峰命名法:
                      去掉-,然后将-后的字母大写

              我们通过style属性设置的样式都是内联样式
                而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示。
              但是如果在样式中写了!important,则此时样式会有更高的优先级,
                即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效。
                所以尽量不要为样式添加!important

          */
          box1.style.width = '300px';
          box1.style.height = '300px';
          box1.style.backgroundColor = 'yellow';
        };

        //点击按钮2以后,读取元素的样式
        var btn02 = document.getElementById('btn02');

        btn02.onclick = function () {
          //读取box1的样式
          /* 
            语法:
              语法: 元素.style.样式名

            通过style属性设置和读取的都是内联样式
              无法读取样式表中的的样式
          */
          alert(box1.style.width);
          alert(box1.style.backgroundColor);
        };
      };
    </script>
  </head>
  <body>
    <button id="btn01">点我一下</button>
    <button id="btn02">点我一下2</button>
    <br />
    <br />
    <div id="box1"></div>
  </body>
</html>
